page {
  background-color: #23262D;

  .home {

    // 定位+搜索+图标
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      // padding-top: 86rpx;
      padding-bottom: 34rpx;
      background-color: #23262D;
      z-index: 999;

      // 定位
      .location {
        display: flex;
        align-items: center;

        .city {
          opacity: 0.78;
          font-size: 28rpx;
          color: #DFDFDF;
        }

        .img {
          width: 26.3rpx;
          height: 13.6rpx;
          opacity: 0.78;
          background: #23262D;
          margin: 0 10rpx;
        }
      }

      // 搜索
      .search {
        display: flex;
        background: #33363d url() no-repeat 24rpx;
        background-size: 27rpx 27rpx;
        width: 518rpx;
        height: 60rpx;
        border-radius: 26rpx;
        font-size: 28rpx;
        color: #7A7A7A;

        .ipt {
          width: 452rpx;
          height: 60rpx;
          margin-left: 66rpx;
        }
      }

      // 图标
      .icon {
        width: 36rpx;
        height: 36rpx;
        margin-left: 14rpx;
      }
    }

    // 轮播图
    .banner {
      margin-top: 60rpx;
      padding-top: 42rpx;
      width: 100%;
      height: 312rpx;

      .swiper {
        width: 100%;
        height: 312rpx;

        .item {
          .img {
            width: 650rpx;
            height: 290rpx;
            transform: scale(0.9);
            border-radius: 15rpx;
          }

          .active {
            transform: scale(1);
            transition: all 0.4s;
          }
        }

        // 指示点
        .wx-swiper-dot {
          background-color: #fff;
          opacity: 0.4;
          width: 8rpx;
          height: 8rpx;
          border-radius: 16rpx;
          margin: -22rpx 8rpx !important;
        }

        .wx-swiper-dot.wx-swiper-dot-active {
          opacity: 1;
          width: 28rpx;
        }
      }

    }

    // 热映影片
    .hot {

      // 标题
      .top {
        width: calc(100% - 80rpx);
        height: 50rpx;
        margin: 45rpx 40rpx 15rpx;
        display: flex;
        justify-content: space-between;
        color: #fff;

        .left {
          display: flex;
          align-items: center;

          .line {
            width: 8rpx;
            height: 34rpx;
            background-image: linear-gradient(90deg, #F26182 5%, #F1A064 100%);
          }

          .title {
            font-size: 36rpx;
            color: #DFDFDF;
            margin-left: 10rpx;
          }
        }

        .right {
          display: flex;
          align-items: center;

          .text {
            opacity: 0.78;
            font-size: 24rpx;
            line-height: 50rpx;
            color: #DFDFDF;
            margin-right: 10rpx;
          }

          .img {
            width: 12rpx;
            height: 22rpx;
          }
        }
      }

      // 列表
      .list {
        display: flex;
        width: calc(100% - 46rpx);
        margin-left: 46rpx;
        overflow: auto;

        .item {
          width: fit-content;
          color: #DFDFDF;
          text-align: center;
          margin-left: 46rpx;

          .img {
            width: 180rpx;
            height: 244rpx;
            vertical-align: top;
          }

          .name {
            width: 100%;
            height: 33rpx;
            font-size: 24rpx;
            margin: 10rpx auto;
            text-align: center;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }

          .buy {
            width: 100rpx;
            height: 44rpx;
            font-size: 24rpx;
            text-align: center;
            margin: 0 auto 10rpx;
            background-image: linear-gradient(150deg, #F25B86 0%, #F1AC5E 100%);
            border-radius: 22rpx;
            line-height: 44rpx;
          }
        }

        .item:first-child {
          margin-left: 0;
        }
      }
    }

    // 即将上映
    .soon {

      // 标题
      .top {
        width: calc(100% - 80rpx);
        height: 50rpx;
        margin: 45rpx 40rpx 15rpx;
        display: flex;
        justify-content: space-between;
        color: #fff;

        .left {
          display: flex;
          align-items: center;

          .line {
            width: 8rpx;
            height: 34rpx;
            background-image: linear-gradient(90deg, #F26182 5%, #F1A064 100%);
          }

          .title {
            font-size: 36rpx;
            color: #DFDFDF;
            margin-left: 10rpx;
          }
        }

        .right {
          display: flex;
          align-items: center;

          .text {
            opacity: 0.78;
            font-size: 24rpx;
            line-height: 50rpx;
            color: #DFDFDF;
            margin-right: 10rpx;
          }

          .img {
            width: 12rpx;
            height: 22rpx;
          }
        }
      }

      // 列表
      .list {
        display: flex;
        width: calc(100% - 46rpx);
        margin-left: 46rpx;
        overflow: auto;

        .item {
          width: fit-content;
          color: #DFDFDF;
          margin-left: 28rpx;
          text-align: left;

          .img {
            width: 240rpx;
            height: 324rpx;
            vertical-align: top;
          }

          .name {
            width: 100%;
            font-size: 24rpx;
            margin: 10rpx 0;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }

          .buy {
            width: 100%;
            opacity: 0.55;
            font-size: 24rpx;
            color: #DFDFDF;
            margin-bottom: 10rpx;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }

        .item:first-child {
          margin-left: 0;
        }
      }
    }

    // 精彩预告
    .preview {

      // 标题
      .top {
        width: calc(100% - 80rpx);
        height: 50rpx;
        margin: 45rpx 40rpx 15rpx;
        display: flex;
        justify-content: space-between;
        color: #fff;

        .left {
          display: flex;
          align-items: center;

          .line {
            width: 8rpx;
            height: 34rpx;
            background-image: linear-gradient(90deg, #F26182 5%, #F1A064 100%);
          }

          .title {
            font-size: 36rpx;
            color: #DFDFDF;
            margin-left: 10rpx;
          }
        }

        .right {
          display: flex;
          align-items: center;

          .text {
            opacity: 0.78;
            font-size: 24rpx;
            line-height: 50rpx;
            color: #DFDFDF;
            margin-right: 10rpx;
          }

          .img {
            width: 12rpx;
            height: 22rpx;
          }
        }
      }

      // 列表
      .list {
        display: flex;
        width: calc(100% - 46rpx);
        margin-left: 46rpx;
        overflow: auto;
        margin-bottom: 200rpx;

        .item {
          width: fit-content;
          color: #DFDFDF;
          margin-left: 32rpx;
          text-align: left;

          .img {
            width: 590rpx;
            height: 320rpx;
            vertical-align: top;
          }

          .name {
            width: 100%;
            font-size: 24rpx;
            margin: 10rpx 0;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }

        .item:first-child {
          margin-left: 0;
        }
      }
    }
  }
}